import { useState, useEffect } from 'react'

export default function App() {
  const [count, setCount] = useState(0)
  const [age, setAge] = useState(8)

  const handleClick = () => {
    setCount(count + 1)
    // setCount((count) => count + 1)
  }

  // 应该写到专门的处理副作用的 hook 里面
  // document.title = count
  // 第一个参数是一个函数
  // 执行时机：初始化、所有状态变化后也会执行
  // !问题：修改了 age，其实是不期望执行 useEffect 回调的（副作用处理函数）
  // !相当于 class 中的 componentDidMount + componentDidUpdate
  useEffect(() => {
    console.log('~~')
    document.title = count
  })
  return (
    <div>
      <h3>count: {count}</h3>
      <h3>age: {age}</h3>
      <button onClick={handleClick}>count+1</button>
      <button onClick={() => setAge(age + 1)}>age+1</button>
    </div>
  )
}
